<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>jscript02함수와객체</title>
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	</head>

	<body>
		<h1>함수와객체</h1>
		<h3>함수 function</h3>
		<p>
			프로그램 코드들의 집합
		</p>
		<p>
			함수정의1:function 함수명(인수){함수몸체;}
		</p>
		<p>
			함수정의1:function 함수명(인수){함수몸체; return 결과;}
		</p>
		<script type="text/javascript">
			for (var i = 1; i <= 5; i++)
				document.write("효주최고 <br/>");

			for (var i = 1; i <= 10; i++)
				document.write("효주짱 <br/>");

			for (var i = 1; i <= 15; i++)
				document.write("효주짱짱 <br/>");

			function sayHello(count, msg) {
				for (var i = 1; i <= count; i++)
					document.write(msg + "<br/>");

			}

			sayHello(5, "아이유금지");
			sayHello(10, "효주짱");

		</script>

		<!-- <script type="text/javascript">
		var dan = prompt("단입력.");
		function gugudan(gugu) {

		for (var i = 1; i <= 9; i++)
		document.write("<br/>" + gugu + "*" + i + "=" + gugu * i);

		}

		gugudan(dan);
		</script>

		<script type="text/javascript">
		function gugudan1(num) {
		var result = '';
		for (var i = 1; i <= 9; i++) {

		result = num + "x" + i + "=" + (num * i) + "<br>";
		document.write(result);
		}
		}

		var dan = prompt("출력할단입력");

		gugudan1(dan);
		</script>
		-->
		<!-- <script type="text/javascript">
		function gugudan2(num) {
		var result = '';
		for (var i = 1; i <= 9; i++) {

		result = result + num + "x" + i + "=" + (num * i) + "<br>";

		}
		return result;
		} -->
		//var dan = prompt("출력할단입력");

		//gugudan1(dan);
		var dan = prompt("출력을 단을입력");
		document.write(gugudan2(dan));
		</script>

		<h3>함수 내 변수의 scope</h3>
		<p>
			변수 선언시 var 예약어를 사용해서 선언한 변수는 지역변수
		</p>
		<p>
			var 예약어 없이 선언한 변수는 전역변수
		</p>
		<script type="text/javascript">
			var x = '가';
			//로컬변수(지역변수)
			function showX() {
				x = '나';
				return x;
			}//전역변수


			document.write(showX());
			//나
			document.write(x + "<br/>");
			//나

			function showY() {
				var x;
				x = '다';
				return x;
			}


			document.write(showY());
			//다
			document.write(x + "<br/>");
			//나

		</script>

		<h3>익명함수</h3>
		<p>
			function 예약어 다음에 함수명이 없는 함수
		</p>
		<p>
			이것을 가끔 람다 lamda함수 라고 함.
		</p>
		<script type="text/javascript">
			//		say(); 익명함수인 경우 함수 정의전 실행불가
			say2();
			//#1 일반함수인 경우 함수정의 보다 호출이 먼저 사용되어도 정상실행
			var say = function() {
				alert("익명함수");
			};
			say();
			//함수 정의후 호출 - 정상 실행

			function say2() {
				alert("일반함수");
			}

			say2();
			// #2

		</script>
		<script type="text/javascript">
			var key = 2;
			// switch(key){
			// case 1: function say(){alert("안녕");};say();break;
			// case 2: function say2(){alert("HI");};say2();break;
			//
			//
			// }

			var says;
			switch(key) {
				case 1:
					says = function() {
						alert("안녕");
					};

					break;
				case 2:
					says = function() {
						alert("HI");
					};
					break;
			}
			says();
			//단일화된 함수로 호출
		</script>
		<h3>콜백함수 callback function</h3>
		<p>
			일반적으로 함수의 매개변수는 숫자나 문자 중 하나임
		</p>
		<p>
			하지만, 경우에 따라 매개변수가 함수가 될수도 있는데, 이러한 함수를 콜백함수라함.
		</p>
		<p>
			콜백이란 디자인 패턴 중 관찰자(observer)패턴에서 나옴
		</p>
		<p>
			즉, 객체의 상태변화(이벤트)가 발생하는 경우 함수에게 이러한 사실을 전달하게 되는데 이를 콜백함수 함
		</p>
		<p>
			예를 들어, 달걀을 잘 삶으려면, 15분의 시간이 소요됨
			<br/>
			따라서, 15분이 지났는지 계쏙 시계를 들여다 보던지 아니면, 타이머를 이용해 15분이 지나면 알람을 울리게 하면
			됨.
			<br />
			콜백처리는 타이머를 이용한 달걀삶기와 유사함.
		</p>
		<p>
			콜백처리는 키보드나 마우스 이벤트, Ajax에서 데이터 처리에 주로 사용됨
		</p>

		<script type="text/javascript">
			function call3Times(callback) {
				for (var i = 0; i < 3; i++) {
					callback();
				}
			}

			var mycallback = function() {
				alert('함수호출');
			};
			call3Times(mycallback);
		</script>

		<h3>클로저 closure : 내부함수</h3>
		<p>	
			외부함수의 변수에 접근할 수 있는 내부함수를 의미.
		</p>
		<p>실행 중 내부 함수에 선언된 변수는 언제나 그 상태(값)가 유지됨.	</p>
		<script type="text/javascript">
			var name = '효주';
			//4. 전역변수 선언
			function say() {
				var name = '미진';
				//alert(name); //일반적으로 사용하는 형식
				function sayName() {
					alert(name);
				}//1. 내부함수의 정의

				sayName();
				//2.내부함수 호출
			}

			say();
			//sayName(); //3. 내부함수는 외부 호출 불가
		</script>

		<script type="text/javascript">
			var nums = function() {
				var i = 0;

				return function() {
					return ++i;
				};
				//클로저 함수
			};

			var call = nums();
			document.write(call());
			document.write(call());
			document.write(call());

		</script>

		<script type="text/javascript">
			function nums() {
				var i = 0;

				return ++i;
			};

			var call = nums();
			document.write(nums());
			//1
			document.write(nums());
			//1
			document.write(nums());
			//1

			////////////////

			function nums2() {
				var i = 0;

				return function() {
					return ++i;
				};
				//클로저 함수
			};

			var num = nums2();
			document.write(num());
			//1
			document.write(num());
			//2
			document.write(num());
			//3

		</script>
		
		<script type="text/javascript">
			function first(x){
				var tmp=25;
				function second(y){
					document.write(x+y+(++tmp));}
					second(12);
				
			}
			first(13); //51- 일반함수
			first(13); //51- 일반함수
			first(13); //51- 일반함수
			first(13); //51- 일반함수
			///////////////////
				function third(x){
				var tmp=25;
				return function (y){
					document.write(x+y+(++tmp));};
					
			}
			 var fourth=third(13); //클로저 함수
			 fourth(12);  //51
			 fourth(12);  //52
			 fourth(12);  //53
			 
			 
		</script>

	</body>
</html>

